<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>江宁义务网上商城 - 网购首选 - 正品低价、品质保障、货到付款、配送及时、放心服务、轻松购物！</title>
<meta name="description" content="义务商城-专业的综合网上购物商城，在线销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品、在线旅游等数万个品牌千万种优质商品。便捷、诚信的服务，为您提供愉悦的网上商城购物体验! ">
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东商城">
<jsp:include page="../common/include.jsp"></jsp:include>
<!-- mobile setting -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<SCRIPT src="<c:url value="/scripts/jquery-1.2.6.pack.js"/> " type=text/javascript></SCRIPT>
<SCRIPT src="<c:url value="/scripts/base.js"/> " type=text/javascript></SCRIPT>
</head>
<script>
    function addToCart(){
    	document.myform.action="<c:url value="/crtc/addToShoppingCart"/>";
    	return true;
    }
    
    //增加或者减少商品
    function addNum(val){
    	var numOfpro = parseInt($("#pnum").val());
    	if(val == -1 && numOfpro == 1){
    		alert("至少购买一件商品");
    	}else if(numOfpro > 999 && val == 1){
    		alert("购买数量应该在1-999之间");
    	}else{
    		var result = val + numOfpro;
    		$("#pnum").attr("value",result);
    	}
    }
    
    //及时验证输入的数量是否符合要求
    function validAccount(obj){
    	var regu = "^\\d+$";
    	var re = new RegExp(regu);
    	var pnum = obj.value;
    	if(pnum == ""){
    		alert("购买数量应该在1-999之间");
    		obj.value = "1";
    	}
    	if(!re.test(pnum)){
    		obj.value=obj.value.replace(/\D/g,'');
    		if(obj.value == ""){
    			obj.value = "1";
    		}
    	}else{
    		if(parseInt(pnum) == 0){
    			alert("至少购买一件商品");
    			obj.value = "1";
    		}
    		if(parseInt(pnum)>999){
    			alert("购买数量应该在1-999之间");
    			obj.value = pnum.substring(0,pnum.length-1);
    		}
    	}
    }
</script>
<body>
<div class="wrapper">
    <jsp:include page="../common/top.jsp"></jsp:include>
    <div class="section_container">
        <!--Mid Section Starts-->
        <section><div class="section">
        	<ul class="breadcrumb">
		      <li>&ouml; &nbsp;&nbsp;<a href="<c:url value="/wlc"/> ">首页</a></li>
		      <li><a href="<c:url value="/wlc/glstdl?dlcode=${p.get('pdlcode')}"/> ">${p.get("dlname")}</a></li>
		      <li class="active"><a href="<c:url value="/wlc?xlcode=${p.get('pxlcode')}"/> "> ${p.get("xlname")}</a></li>
		    </ul>
    <!--PRODUCT DETAIL STARTS-->
    <div id="product_detail"> 
      <!--Product Left Starts-->
      <div class="product_leftcol" id="spec-n1"> <img class="p_pic" src="<c:url value="${p.get('pphoto') }"/> " /> <span class="pr_info">&nbsp;</span> 
       <div id="spec-list"> 
        <ul class="pr_gallery">
        	<c:forEach items="${pclist}" var="pc">
        		<li><img src="<c:url value="${pc.get('picurl')}"/>" /></li>
        	</c:forEach>
        </ul>
        </div>
      </div>
      <!--Product Left Ends--> 
      <!--Product Right Starts-->
      <form name="myform" method="post">
      <div class="product_rightcol"> <small class="pr_type">雕牌洗衣粉</small>
        <h1>${p.get("pname")}</h1>
        <p class="short_dc">
        	${p.get("pjieshao")}
        </p>
        
        <div class="pr_price"> 现 价 : <big>￥${p.get("phyprice")}</big> 市场价 : <small>￥${p.get("pscprice")}</small> </div>
        <div class="size_info">
          <div class="size_sel">
            <label>重 量 : 3kg</label> <label style="margin-left: 50px;">商品积分 : ${p.get("khjf")}</label> 
          </div>
          <div class="color_sel">
            <label></label>
          </div>
        </div>
        <div class="qty_info">
          <div class="quantity">
            <label>数 量 : </label> <a href="javascript:void(0);" onclick="addNum(-1)"> &nbsp;-&nbsp; </a><input type="text" onkeyup="validAccount(this)" name="pnum" id="pnum" value="1"><a href="javascript:void(0);" onclick="addNum(1)">&nbsp;+&nbsp;</a> &nbsp;&nbsp;( 库存量：${p.get("psum")} )
          </div>
        </div>
        <input type="hidden" name="pcode" value="${p.get('pcode')}"/>
        <div class="add_to_buttons">
          <button onclick="parent.location='<c:url value="/crtc/apply"/>'" class="add_cart nowbuy">现在购买  &gt;&gt;</button>
          <span>or</span>
          <button onclick="return addToCart();" class="add_cart">加入购物车&nbsp;</button>
        </div>
        <div class="product_overview">
          <h4>快速描述：</h4>
          ${p.get("pqdesc")}
        </div>
      </div>
      </form>
    <!--Product Right Ends--> 
  </div>
  <!--PRODUCT DETAIL ENDS--> 
<!--Product List Starts-->
            <div class="products_list products_slider">
                <h2 class="sub_title">相关商品</h2>
                <ul class="p_con_list">
                    <li> <a class="product_image"><img src="<c:url value="/images/pr_l_1.jpg"/> " /></a>
                        <div class="product_info">
                            <h3><a href="leisure_detail.html">GearMax三星i9500手机保护套S4驼鸟纹皮套 红色</a></h3>
                        </div>
                        <div class="price_info"> <span class="oldp">￥123.22</span>
                            <button class="price_add" title="" type="button"><span class="pr_price">￥76.00</span><span class="pr_add">加入购物车</span></button>
                        </div>
                    </li>
                    <li> <a class="product_image"><img src="<c:url value="/images/pr_l_2.jpg"/> " /></a>
                        <div class="product_info">
                            <h3><a href="leisure_detail.html">三星16G TF MicroSD/SDHC高速存储卡 升级版</a></h3>
						</div>
                        <div class="price_info"> <span class="oldp">￥123.22</span>
                            <button class="price_add" title="" type="button"><span class="pr_price">￥76.00</span><span class="pr_add">加入购物车</span></button>
                        </div>
                    </li>
                    <li> <a class="product_image"><img src="<c:url value="/images/pr_l_3.jpg"/> " /></a>
                        <div class="product_info">
                            <h3><a href="leisure_detail.html">金士顿 16GB class10 SD存储卡店庆风暴！C10高三星、小米等手机）店庆风暴！历史超低价！端午回家带个充</a></h3>
                        </div>
                        <div class="price_info"> <span class="oldp">￥123.22</span>
                            <button class="price_add" title="" type="button"><span class="pr_price">￥76.00</span><span class="pr_add">加入购物车</span></button>
                        </div>
                    </li>
                    <li> <a class="product_image"><img src="<c:url value="/images/pr_l_5.jpg"/> " /></a>
                        <div class="product_info">
                            <h3><a href="leisure_detail.html">CN Clogs Beach/Garden Clog</a></h3>
                        </div>
                        <div class="price_info"> <span class="oldp">￥123.22</span>
                            <button class="price_add" title="" type="button"><span class="pr_price">￥76.00</span><span class="pr_add">加入购物车</span></button>
                        </div>
                    </li>
                    <li> <a class="product_image"><img src="<c:url value="/images/pr_l_2.jpg"/> " /></a>
                        <div class="product_info">
                            <h3><a href="leisure_detail.html">CN Clogs Beach/Garden Clog</a></h3>
                        </div>
                        <div class="price_info"> <span class="oldp">￥123.22</span>
                            <button class="price_add" title="" type="button"><span class="pr_price">$76.00</span><span class="pr_add">加入购物车</span></button>
                        </div>
                    </li>
                </ul>
            </div>
            <!--Product List Ends-->
            <hr class="detail_hr">
            <div class="pro_detail">
				<div class="detail_title">
					 <div id="detail_tab5" onclick="ChangeVideoInfoBox3(id)"><a href="javascript:void(0)">商品介绍</a></div>								      
					 <div id="detail_tab6" onclick="ChangeVideoInfoBox3(id)"><a href="javascript:void(0)">商品评价（239）</a></div>
				 </div>
				 <div class="detail_cont" id="detail_tab5_content">
				 	<img src="<c:url value="${p.get('pdesc')}"/> ">
				 </div>
				 <div class="detail_cont" id="detail_tab6_content" style="display:none">
				 	商品评价 100%
				 </div>
            </div>
        </div></section>
        <!--Mid Section Ends-->
    </div>
    <div class="footer_container">
        <!--Footer Starts-->
 		   <jsp:include page="../common/footer.jsp"></jsp:include>
        <!--Footer Ends-->
    </div>
</div>

<!--CUSTOMIZE-->
<style type="text/css">
.page_selector{ position:absolute; right:0px; top:28%;}
.page_selector a.page_open{ display:inline-block; width:60px; height:12px; background:#252525; color:#fff; text-align:center; font-size:14px; padding:20px 0px; font-weight:bold; text-decoration:none; float:left;}
.page_selector ul{ float:left; background:#f0f0f0; padding:10px 0px; border-top:solid 2px #000; border-bottom:solid 2px #000; display:none;}
.page_selector ul li{ padding:8px 10px; }
.page_selector ul li a{ font-weight:bold; text-decoration:none; color:#000; display:block; padding:2px 5px; text-transform:uppercase; font-size:11px;}

.store_selector{ position:absolute; left:0px; top:28%;}
.store_selector .store_open{display:inline-block; width:128px; height:55px;}
.store_selector div{ float:left; width:157px; height:226px; display:none;}
</style>

<script type="text/javascript">
$(document).ready(function(){
	//SLIDE TOGGLE
	jQuery(".page_open").toggle(function() {
		 $('.page_selector ul').slideDown(300);	
		 }, function(){
		 $('.page_selector ul').slideUp(300);		 
	});	
	//SLIDE TOGGLE
	jQuery(".store_open").toggle(function() {
		 $('.store_selector div').slideDown(300);	
		 }, function(){
		 $('.store_selector div').slideUp(300);		 
	});		
});

</script>

<div class="page_selector">
<a href="#" class="page_open">PAGES</a>
<ul>
	<li> <a href="leisure_index.html">HOME</a></li>
    <li> <a href="leisure_listing.html">Product Listing</a></li>
    <li> <a href="leisure_detail.html">Product Detail</a></li>
    <li> <a href="leisure_cart.html">Shopping Cart</a></li>
    <li> <a href="leisure_checkout.html">Checkout</a></li>
    <li> <a href="leisure_contact.php">Contact</a></li>
</ul>
</div>

<SCRIPT type=text/javascript>
	$(function(){			
	   $(".jqzoom").jqueryzoom({
			xzoom:400,
			yzoom:400,
			offset:10,
			position:"right",
			preload:1,
			lens:1
		});
		$("#spec-list").jdMarquee({
			deriction:"left",
			width:350,
			height:56,
			step:2,
			speed:4,
			delay:10,
			control:true,
			_front:"#spec-right",
			_back:"#spec-left"
		});
		$("#spec-list img").bind("mouseover",function(){
			var src=$(this).attr("src");
			$("#spec-n1 img").eq(0).attr({
				src:src.replace("\/n5\/","\/n1\/"),
				jqimg:src.replace("\/n5\/","\/n0\/")
			});
			$(this).css({
				"border":"1px solid #ff6600",
				"padding":"1px"
			});
		}).bind("mouseout",function(){
			$(this).css({
				"border":"1px solid #ccc",
				"padding":"1px"
			});
		});				
	})
	</SCRIPT>

<SCRIPT src="<c:url value="/scripts/lib.js"/>" type=text/javascript></SCRIPT>
<SCRIPT src="<c:url value="/scripts/163css.js"/> " type=text/javascript></SCRIPT>
</body>
</html>